<template>
	<view>
		<view class="foot_main_con" :style="{backgroundColor: headBg,paddingBottom: sysInfo.safeAreaInsets.bottom * 2 + 'rpx',}">
			<view class="foot_main border-box flex-around" :style="{backgroundColor: headBg,}">
				<view class="foot_main_item flex-column flex-center" v-for="item in footList" :key="item.id"
					@click="onFoot_item(item)">
					<image class="foot_main_item_icon" :src="item.status ? item.imgActive : item.img" mode=""></image>
					<view
						:class="[item.status ? 'foot_main_item_text foot_main_item_text_active' : 'foot_main_item_text']">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			headBg: {
				type: String,
				default: "#fff"
			},
			activeNum: {
				type: [Number, String],
				require: true,
			},
			footList: {
				type: Object,
				default: () => [
					// {
					// 	id: 1,
					// 	img: require("../../static/c1.png"),
					// 	imgActive: require("../../static/uni.png"),
					// 	title: "首页",
					// 	status: false,
					// 	url: "/pages/index/index"
					// },
				]
			},
		},
		
		data() {
			return {
				sysInfo: {},
			}
		},
		watch: {
			activeNum: {
				handler(newVal) {
					this.footList.forEach((item) => {
						item.status = false;
						if (newVal == item.id) {
							item.status = true;
						}
					})
				},
				immediate: true,
				deep: true
			},
		},
		created() {
			this.sysInfo = this.$common.mySysInfo();
			
		},
		methods: {
			onFoot_item(param) {
				this.footList.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						item.status = true;
						uni.redirectTo({
							url: item.url
						});
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.foot_main_con {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0, ;
		z-index: 10;

		.foot_main {
			width: 100%;
			height: 100rpx;

			.foot_main_item {
				height: 100%;
				flex: 1;

				.foot_main_item_icon {
					width: 48rpx;
					height: 48rpx;
				}

				.foot_main_item_text {
					color: #{$footColor};
					font-size: 24rpx;
				}

				.foot_main_item_text_active {
					color: #{$footActiveColor};
				}
			}

			.circle {
				width: 20%;
				height: 100%;
				border-radius: 50%;
				background-color: #{$whiteColor};
			}
		}
	}
</style>